<template>
	<div class="order-list">
		<el-breadcrumb style='font-size:16px;padding:10px 0;margin-bottom:10px;border-bottom:1px solid #569efe' separator="/">
		  <el-breadcrumb-item :to="{ path: '/' }">活动列表</el-breadcrumb-item>
		  <el-breadcrumb-item :to="{ path: '/activity/list/order_manage/' + actionId}">订单管理</el-breadcrumb-item>
		  <el-breadcrumb-item>订单信息</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="order-item"><span class="order-title">活动名称：</span><span class="result">{{title}}</span></div>
		<div class="order-item"><span class="order-title">订单号：</span><span class="result">{{ordernum}}</span></div>
		<div class="order-item"><span class="order-title">提交时间：</span><span class="result">{{orderdate}}</span></div>
		<div class="order-item"><span class="order-title">订单状态：</span><span class="result">{{statusStr}}</span></div>
		<div class="order-item"><span class="order-title">付款时间：</span><span class="result">{{paydate}}</span></div>
		<div class="order-item"><span class="order-title">付款方式：</span>
			<span class="result" v-if='paytype==2'>微信支付</span>
	       	<span class="result" v-if='paytype==1'>积分支付</span>
	       	<span class="result" v-if='paytype==0||paytype==""'>-</span>
	    </div>
		<div style="margin:10px;width:800px;position:relative;border-left:1px solid #eee">
			 <el-table
			    :data="enrolllist"
			    border
			    style="width:800px;position:relative">
			   <el-table-column
			      prop="type"
			      label="券(票)种"
			      width="194">
			      <template scope='scope'>
			      	{{scope.row.ticketTitle}}
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="price"
			      label="价格"
			      width="196">
			      <template scope='scope'>
			      	{{scope.row.money>=0?scope.row.money:''}}
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="score"
			      label="积分"
			      width="202">
			      <template scope='scope' >
			      	{{scope.row.score>=0?scope.row.score:''}}
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="address"
			      label="数量"
			      width='206'
			     >
			       <template scope='scope'>
			      	{{scope.row.number}}
			      </template>
			    </el-table-column>		  	
			  </el-table>
			 <div class="total">
			 <span v-if='paytype==2'>共计：&yen;{{actionOrder.money}}</span>
			 <span v-if='paytype==1'>共计：{{actionOrder.score}}积分</span>
			 <span v-if='paytype==0||paytype==""'>-</span>
			</div>
		</div>
		<h2 class="order-info info-list">报名人信息</h2>
		<div class="wait-check">审核状态：<span>{{statusStr}}</span></div>
		<div style="width: 80%;margin:10px;" v-for='item in infolist'>
			<el-table
		    :data="item"
		    border
		    style="width: 603px;"
		    >
		    <el-table-column
		      prop="type"
		      label="信息名称"
		      width="300">
		      <template scope='scope'>
		      	{{scope.row.infoname}}
		      </template>
		    </el-table-column>
		    <el-table-column
		      prop="content"
		      label="信息内容"
		      width="300">
		      <template scope='scope'>
		      	{{scope.row.value}}
		      </template>
		    </el-table-column>
		  </el-table>
	  </div>
	  
	  <div class="order-btn">
	  	<el-button type="primary" @click='handlePass'  v-show='status == 0'>通过</el-button>
	  	<el-button type="danger" @click='handleRefulse' v-show='status == 0'>驳回</el-button>
	  	<el-button type="primary" @click="$router.go(-1)">返回</el-button>
	  </div>
	  <el-dialog v-if="showBtn"  style='width:1200px;left:50%;margin-left:-600px;' title="驳回理由" :visible.sync="showBtn">
	      <div class="coupon-detail" v-loading="btnLoading">
	        <el-form label-width="110px">
	          <el-form-item label="驳回理由：">
	            <el-input type='textarea' v-model="reason" style="width:400px;"></el-input>
	          </el-form-item>
	        </el-form>
	        <div class="save-btn">
	          <button class="dialog-btn" @click="handleSave">确定驳回</button>
	          <button class="dialog-btn" @click="handleBack">返回</button>
	        </div>
	      </div>
	    </el-dialog>
	</div>
</template>
<script>
	export default {
		data(){
			return {
				id:this.$route.params.id,
				actionId:this.$route.query.activityId,
				actionOrder:[],
				reason:'',
				showBtn:false,
				btnLoading:false,
				title:null,
				statusStr:null,
				ordernum:null,
				orderdate:null,
				paydate:null,
				paytype:'',
				infolist:null,
				status:null,
				enrolllist:null
			}
		},
		methods: {
		  getStatusData(){
		  	let That = this;
			this.$http.post('marketweb/orderback/updateStatus',{
	      		keyAdmin:this.$store.state.keyAdmin,
	      		orderId:this.id,
	      		reason:this.reason,
	      		status:this.status
	      	}).then(response=>{
	      		if(response.body.code == 200){
	      			if(this.status == 2){
	      				if(this.actionOrder.score<=0&&this.actionOrder.money<=0){
		      				this.changePayFinish()
		      			}
	      			}else{
	      				setTimeout(function(){
	      					That.btnLoading = false;
	      					That.showBtn = false
		      				That.$message({
			      				message:'操作成功',
			      				type:'success'
			      			})
			      			That.reason = ''
	      				},1000);
	      			}
	      			
	      		}else{
	      			this.$message.error(response.body.msg)
	      		}
	      	},response=>{
	      		this.$message.error('操作订单失败')
	      	})
		  },

		  handleBack(){
		  	this.showBtn = false;
		  	this.reason = ''
		  },

		  handleSave(){
		  	if(this.reason){
		  		this.status = 1;
		  		this.btnLoading = true;
	      		this.getStatusData()
		  	}else{
		  		this.$message.error('请输入驳回理由')
		  	}
		  	
		  },

		  changePayFinish(){
		  	this.$http.post('marketweb/actionweb/finishpay',{
	      		keyAdmin:this.$store.state.keyAdmin,
	      		orderId:this.id,
	      		outtradeno:'MIANFEI',
	      		paytype:1
	      	}).then(response=>{
	      		if(response.body.code == 200){
	      			this.$message({
	      				message:'操作成功',
	      				type:'success'
	      			})
	      		}else{
	      			this.$message.error(response.body.msg)
	      		}
	      	},response=>{
	      		this.$message.error('操作订单失败')
	      	})
		  },

	      handlePass(){
	      	this.status = 2;
	      	this.getStatusData()
	      },

	      handleRefulse(){
	      	this.showBtn = true;
	      },

	      getOrderInfoData(){
	      	this.$http.post('marketweb/orderback/selectById',{
	      		keyAdmin:this.$store.state.keyAdmin,
	      		orderId:this.id
	      	}).then(response=>{
	      		if(response.body.code == 200){
	      			this.actionOrder = response.body.actionOrder
	      			this.title = this.actionOrder.title
	      			this.ordernum = this.actionOrder.ordernum
	      			this.orderdate = this.actionOrder.orderdate
	      			this.paydate = this.actionOrder.paydate
	      			this.statusStr = this.actionOrder.statusStr
	      			this.enrolllist = this.actionOrder.enrolllist
	      			this.infolist = this.actionOrder.infolist
	      			this.status = this.actionOrder.status
	      			this.paytype = this.actionOrder.paytype
	      		}else{
	      			this.$message.error(response.body.msg)
	      		}
	      	},response=>{
	      		this.$message.error('请求信息失败')
	      	})
	      }
	    },

	    created(){
	    	this.getOrderInfoData()
	    }
	}
</script>

<style scoped>
	.order-list{
		padding: 0 20px;
	}
	.order-info{
		font-size: 18px;
		padding:15px;
		padding-top: 35px;
		color: #4fa6dc;
		border-bottom: 1px solid #aaa;
	}
	.info-list{
		margin-top:30px;
	}
	.order-title{
		display: inline-block;
		width: 150px;
	}
	.order-item{
		padding: 15px;
		font-size: 16px;

	}
	.result{
		padding-left: 60px;
	}
	.wait-check{
		padding: 10px;
		font-size: 14px;
		color: #000;
	}
	.el-table-column{
		text-align: center;
	}
	.order-btn{
		padding: 30px 10px;
		text-align: center;
	}
	.total{
		position: absolute;
		right: 0px;
		text-align: center;
		line-height: 40px;
		width: 798px;
		bottom:-41px;
		height: 40px;
		border: 1px solid #ddd;
	}
	.save-btn{
		padding: 20px 0;
		text-align: center;
	}
	.dialog-btn{
		background: #499AFF;
		border: none;
		color: #fff;
		outline: none;
		font-size: 12px;
		border: 1px solid #eee;
		border-radius: 8px;
		width: 100px;
		margin: 0 10px;
		height: 40px;

	}
</style>